{extend name='public/window' /}

{block name="content"}
<style>
    .layui-upload-drag {
        position: relative;
        padding: 10px;
        border: 1px dashed #e2e2e2;
        background-color: #fff;
        text-align: center;
        cursor: pointer;
        color: #999;
        border-radius: 50%;
    }
    .layui-input{
        width: 80%;
    }
    .layui-form-label{
        width: 100px;
    }
    .layui-layer{
        top: 90px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding: 15px;">

            <form class="layui-form" action="" lay-filter="form">
                <div class="layui-form-item">
                    <label class="layui-form-label">巡检图片 *</label>
                    <div style="display:flex;align-items: center;padding-top: 10px;flex-wrap: wrap">
                        {foreach ($info['img'] as $k=>$v)}
                            <div style="margin-right: 10px">
                                <img src="{$v}"  onclick="previewImg(this)" alt="" style="display: inline-block;width:300px;height: 200px">
                            </div>
                        {/foreach}
                    </div>
                </div>
                
            </form>
        </div>
    </div>
</div>
<script>
    function previewImg(url){
        // console.log(url.src);
        var imgHtml = "<img src='" + url.src + "' width='100%' height='100%'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: ['top:10px'],
            area: [400 + 'px', 400 + 'px'],
            shadeClose: true,
            scrollbar: false,
            title: "图片预览",
            content: imgHtml,
            cancel: function () {

            }
        });
    }
</script>

{/block}
